<template>
	
	
	<view class="common-normal-box course-box">
		
		<view class="no-data" v-if="courseList.length==0">
			您的班级还没有定制课程表
		</view>
		<template v-else>
			<view class="course-lesson" >
				<view class="line-kind">
				  <view class="headerCon1">课时</view>
				  <view class="headerCon2">星期</view>
				  <view class="headerLine"></view>
				</view>
				<view v-for="(item, index) of timeList" :key="index" class="lesson-list">
				  <view class="week-td">
				    <text>{{ item.secName }}</text> 
				    <text>({{ item.sTime }} - {{ item.eTime }})</text>
				  </view>
				</view>
			</view>
			
			<view class="course-detail">
				<view class="week-list">
					<view v-for="(val, windex) in weeks" :key="windex">
					  {{ val.cnName }}
					</view>
				</view>
				<view class="section-outer">
					<view class="sec-column" v-for="(itemArr,index) in weekNums">
						
						<view class="sec-td" v-for="option in itemArr">
							<text class="lesson-text" >{{option.subject}}</text>	
							<text>{{option.pNoTeacher}}</text>
								
						</view>
						
					</view>	
				</view>
				
				
			</view>
		</template>
		
		
	</view>

</template>

<script>
	import { fetchData } from '../../utils/request'
	import  {mapState} from 'vuex'
	export default {
		name:'CoursePage',
		data() {
			return {
				courseList:[],
				weekNums:[],
				timeList:[],
				 weeks: [{
				        noId: 0,
				        cnName: '周一',
				        enName: 'mon'
				      }, {
				        cnName: '周二',
				        noId: 1,
				        enName: 'Tue'
				      }, {
				        cnName: '周三',
				        noId: 2,
				        enName: 'wed'
				      }, {
				        cnName: '周四',
				        noId: 3,
				        enName: 'thurs'
				      }, {
				        cnName: '周五',
				        noId: 4,
				        enName: 'fri'
				      }, {
				        cnName: '周六',
				        noId: 5,
				        enName: 'sat'
				      }, {
						cnName: '周日',
						noId: 6,
						enName: 'sun'
					  }],
			};
		},
		computed:{
			...mapState(['classId','baseImgURL','currentMenu'])
		},
		methods:{
			 // section:  第几节课   week： 周   
			    lessonInit(section, week) {
			      if(this.courseList.length==0) return;
			      for (let n = 0, len = this.courseList.length; n < len; n++) {
			        let data = this.courseList[n];
			        if (Number(data.section) == section && data.week == week) {
						return {
							subject:data.subject,
							pNoTeacher:data.pNoTeacher
						}
			        } 
			      }
			    },
			 //  课程渲染
			    drawCourse() {
					this.weekNums = [];
			      // i - 周
			      // m - 哪节课
			      for (let i = 0; i < 7; i++) {
					   let weekData = [];
					   let weekObj = this.weeks.find((item)=>{ return item.noId==i});
			        for (let m = 0; m < 7; m++) {
						 // 一周  
						 let lessonObj = this.lessonInit(m+1,weekObj.enName);
						 weekData.push({
							 enName:weekObj.enName,
							 section:m+1,
							 pNoTeacher:lessonObj ? lessonObj.pNoTeacher : '',
							 subject:lessonObj ? lessonObj.subject :''
						 })	
			        }
					this.weekNums.push(weekData);
			      }
			
			    },
			async getTimerList() {
							  let result = await fetchData({
								url: '/database/feacourse/api/queryClassSection',
								method: 'post',
							  })
							  if (result.code == 200) {
								this.timeList = result.data;
								
							  }
					},
			async getAllCourse(){
				
				let res = await fetchData({
				        url:'/database/feacourse/api/sClassCourseT',
				        method:'POST'
				    })
					
				const { feaCourseTDetailEntities, feaCourseTMainEntities } = res.data;
				      this.courseList = feaCourseTDetailEntities;
				      this.feaCourseTMain = feaCourseTMainEntities;	
					  this.drawCourse();
					
			}
		},
		mounted(){
			this.getTimerList();
			this.getAllCourse();
		}
	}
</script>

<style lang="scss" scoped>
.course-box {
	// background: #fff;
	box-sizing: border-box;
	width:99%;
	width:calc(100% - 8.81upx);
	border-radius: 3.13upx;
	display: flex;
	position: relative;
	height:364upx;
	padding-top: 7.86upx;
	.no-data {
		position: absolute;
		left: 50%;
		top:50%;
		transform: translate(-50%,-50%);
		font-size: 11.72upx;
		
		
	}
	.course-lesson {
		 width: 82.03upx;
		 .lesson-list {
			 display: flex;
			 flex-direction: column;
			 .week-td {
				 border: 1px solid #fff;
				 background-color: #4692FF;
				 color: #fff;
				 text-align: center;	 
				 height: 46.06upx;
				 line-height: 14.63upx;
				 font-size: 8.59upx;
				 display: flex;
				 flex-direction: column;
				 padding-top: 7.81upx;
				 box-sizing: border-box;
			 }
		 }
	}
	.course-detail {
		flex: 1;
	}
	.week-list {
		display: flex;
		>view {
			flex: 1;
			height: 23.44upx;
			border: 1px solid #fff;
			background-color: #4692FF;
			color: #fff;
			text-align: center;	
			font-size: 8.59upx;
			padding-top:5.86upx;
			box-sizing: border-box;
		}
	}
}
 

.line-kind {
  position: relative;
  height: 23.44upx;
  border: 1px solid #fff;
  background-color: #4692FF;
  font-size: 8.59upx;
   color: #fff;
}
.headerCon1 {
  font-size: 7.03upx;
  position: absolute;
  left: 10px;
  bottom: 8px;
}

.headerCon2 {
  font-size: 7.03upx;
  position: absolute;
  right: 10px;
  top: 8px;
}

.headerLine {
  position: absolute;
  top: 2px;
  left: 0;
  width: 1px;
  height: 84.45upx;
  transform: rotate(-74deg);
  /*这里需要自己调整，根据线的位置*/
  transform-origin: top;
  background-color: white;
}

.section-outer {
	display: flex;
	height:321upx;
	.sec-column {
		flex:1;
				 display: flex;
				 flex-direction: column;
				 .sec-td{
					 flex:1;
					 border: 1px solid #fff;
					 background-color: #dfecff;
					 color: #333;
					 text-align: center;
					 height: 46.06upx;
					 line-height: 14.63upx;
					 font-size: 7.03upx;
					 display: flex;
					 flex-direction: column;
					 padding-top: 7.81upx;
					 box-sizing: border-box;
					 color:#555;
					 .lesson-text {
						 font-size: 10.16upx;
						 font-weight: 800;
						 color: #333;
					 }
				 }
	}
	
}
</style>
